<template>
	<view class="main">
		
		<view class="container">
			<view class="section">
				<view class="title">预约类型：</view>
				<view class="content">
					<view class="items">
						<view class="item" :class="{selected:n.id==item_id}" @click="selectType(n)" v-for="n in items">{{n.name}}</view>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="title">选择日期：</view>
				<view class="content">
					<view class="input_bg">
						<uni-datetime-picker
							type="date"
							:value="sche_time"
							@change="change"
							:border="border"
						/>
					</view>
				</view>
			</view>
			<view class="section" v-if="schedules.length > 0">
				<view class="title">科室选择：</view>
				<view class="content">
					<view class="items">
						<view class="item" :class="{selected:ks.ks_id==ks_id}" @click="checkKsItem(ks)" v-for="ks in schedules">{{ks.ks_name}}</view>
					</view>
				</view>
			</view>
			<view class="section" v-if="doctors.length > 0">
				<view class="title">医生选择：</view>
				<view class="content">
					<view class="items">
						<view class="item" :class="{selected:doc.doc_id==doc_id}" @click="checkDocItem(doc)" v-for="doc in doctors">{{doc.doc_name}}</view>
					</view>
				</view>
			</view>
			<view class="section" v-if="ampms.length > 0">
				<view class="title">选择：</view>
				<view class="content">
					<view class="items">
						<view class="item" :class="{selected:ap.id==ampm_id}" @click="checkAmpmItem(ap)" v-for="ap in ampms">
							<template v-if="ap.type == 0">上午</template>
							<template v-else>下午</template>
						</view>
					</view>
				</view>
			</view>
			<view class="section" v-if="times.length > 0">
				<view class="title">选择排号：</view>
				<view class="content">
					<view class="items">
						<view class="item" :class="{selected:t.id==time_id}" @click="selectTimes(t)" v-for="t in times">{{t.no}}号</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="submit-btn" @click="submitEvent()">确认提交</view>
		</view>
		
	</view><!-- main end-->
</template>

<script>
	import {schedules,subitems,save} from "@/api/register";
	
	export default {
		data() {
			return {
				border:false,
				sche_time:'',
				items:[],
				schedules:[],
				doctors:[],
				ampms:[],
				times:[],
				item_id:0,
				ks_id:0,//科室
				doc_id:0,//医生id
				ampm_id:0,
				time_id:0,
				amount:0,
			}
		},
		onLoad(options) {
			this.getItemData();
			this.getData();
		},
		onShareAppMessage(){
		},
		methods: {
			selectType(e){
				this.item_id = e.id;
			},
			//科室
			checkKsItem(row){
				if(this.ks_id == row.ks_id)return;
				this.ks_id = row.ks_id;
				this.doctors = row.doctors;
				let that = this;
				//医生
				if(row.doctors && row.doctors.length > 0){
					let doctor = row.doctors[0];
					that.doc_id = doctor.doc_id;
					//上下午
					if(doctor.items && doctor.items.length > 0){
						let item = doctor.items[0];
						that.ampm_id = item.id;
						that.ampms = doctor.items;
						
						//排号
						if(item.nos && item.nos.length > 0){
							let no = item.nos[0];
							that.time_id = no.id;
							that.times = item.nos;
							that.amount = no.amount;
						}
					}
				}
			},
			//医生
			checkDocItem(row){
				if(this.doc_id == row.doc_id)return;
				this.doc_id = row.doc_id;
				this.ampms = row.items;
				let that = this;
				//上下午
				if(row.items && row.items.length > 0){
					let item = row.items[0];
					that.ampm_id = item.id;
					
					//排号
					if(item.nos && item.nos.length > 0){
						let no = item.nos[0];
						that.time_id = no.id;
						that.times = item.nos;
						that.amount = no.amount;
					}
				}
			},
			//上下午
			checkAmpmItem(row){
				if(this.ampm_id == row.id)return;
				this.ampm_id = row.id;
				this.times = row.nos;
				let that = this;
				//排号
				if(row.nos && row.nos.length > 0){
					let no = row.nos[0];
					that.time_id = no.id;
					that.amount = no.amount;
				}
			},
			//选择号源
			selectTimes(t){
				this.time_id = t.id;
			},
			change(e){
				this.sche_time = e;
				this.getData();
			},
			resetData(){
				//科室
				this.ks_id = 0;
				//医生
				this.doc_id = [];
				this.doctors = [];
				//上下午
				this.ampm_id = 0;
				this.ampms = [];
				//排号
				this.time_id = 0;
				this.times = [];
				
				this.amount = 0;
			},
			getItemData(){
				let that = this;
				subitems({}).then(async (res) => {
					that.items = res.data;
					
				})
				.catch((res) => {
				  this.$Message.error(res.msg);
				});
			},
			getData(){
				let that = this;
				uni.showLoading({
					title:"加载中..."
				});
				schedules({
					'sche_time':this.sche_time
				}).then((res)=>{ 
					that.resetData();
					uni.hideLoading();
					if(res.status == 200){
						that.schedules = res.data;
						//取默认数据
						if(that.schedules && that.schedules.length > 0){
							//科室
							let ks = that.schedules[0];
							that.ks_id = ks.ks_id;
							//医生
							if(ks.doctors && ks.doctors.length > 0){
								let doctor = ks.doctors[0];
								that.doc_id = doctor.doc_id;
								that.doctors = ks.doctors;
								//上下午
								if(doctor.items && doctor.items.length > 0){
									let item = doctor.items[0];
									that.ampm_id = item.id;
									that.ampms = doctor.items;
									
									//排号
									if(item.nos && item.nos.length > 0){
										let no = item.nos[0];
										that.time_id = no.id;
										that.times = item.nos;
										that.amount = no.amount;
									}
								}
							}
						}
						
					}else{
						uni.showToast({
							title:res.msg
						});
					}
				}).catch((error)=>{
					uni.hideLoading(); 
					console.log(error);
				});
				
			},
			submitEvent() {
				if(this.item_id == 0 || this.item_id.length == 0){
					uni.showToast({
						title:'请选择就诊事项',
						icon:'none'
					})
					return;
				}
				if(this.time_id == 0 || this.time_id.length == 0){
					uni.showToast({
						title:'请选择号源',
						icon:'none'
					})
					return;
				}
				let that = this;
				uni.showModal({
				        title: '提示',
				        content: '确认预约？',
				        success: function(res) {
				        if (res.confirm) {
				            uni.showLoading({
				            	title:"加载中..."
				            });
				            save({
				            	 item_id:that.item_id,
				            	 time_id:that.time_id,
				            }).then(async (res) => {
				            	 uni.hideLoading();
				            	 if(res.status == 200){
				            	 	uni.reLaunch({
				            	 		url:'/pages/subscribe/result?type=success'
				            	 	})
				            	 }
				            }).catch((res) => {
				            	 uni.hideLoading();
				            	 console.log(error);
				            });
				        } 
				        else {
				            // 执行取消后的操作
				        }
				    }
				})
				
				
			}
		}
	}
</script>

<style lang="scss">
	page {
	  width: 100%;
	  height: 100%;
	  background-color: white;
	}
	.main {
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 30rpx;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
		.mb100{
			padding-bottom: 150rpx;
		}
		.container{
			display: flex;
			flex-direction: column;
			padding-bottom: 150rpx;
			.section{
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
				.title{
					font-size: 28rpx;
					font-weight: bold;
				}
				.content{
					display: flex;
					flex-direction: column; 
					margin-top: 10rpx;
					.items{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						.item{
							font-size: 28rpx;
							color: black;
							width: 22.5%;
							border: 1px solid #f1f1f1;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
							margin-right: 15rpx;
							margin-bottom: 15rpx;
							border-radius: 10rpx;
						}
						.selected{
							border: 1px solid orange;
							color: orange;
						}
					}
					.input_bg{
						display: flex;
						flex-direction: column;
						height: 90rpx;
						border: 1px solid #CCC;
						padding-left: 10rpx;
						padding-right: 10rpx;
					}
				}
				.intro{
					font-size: 28rpx;
					color: red;
					margin-top: 15rpx;
				}
				
			}
		}
		.bottom{
			padding-bottom: 150rpx;
		}
	}
	.footer{
		height: 80rpx;
		width: 100%;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
		.submit-btn{
			background-color: $uni-main-color;
			color: white;
			font-size: 28rpx;
			height: 80rpx;
			width: 100%;
			text-align: center;
			line-height: 80rpx;
		}
	}
	/****/
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:100%;
		background-color: white;
		display: flex;
		flex-direction: column;
		.pupop-btn{
			height: 40px;
			display: flex;
			align-items: center;
			padding: 0 30upx;
			justify-content: space-between;
			font-size: 28rpx;
		}
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		height: 420rpx;
		margin: 30rpx 0rpx 0rpx 0rpx;
		background-color: #F8F8F8;
	}
	
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: center;
		.btn{
			flex: 1;
			height:80rpx;
			background-color: $uni-main-color;
			// border-radius: 40rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			// margin-bottom: 30rpx;
			font-size: 28rpx;
		}
		.mr1{
			margin-right: 1rpx;
		}
	}
	
	.picker-view {
		width: 100%;
		height: 340rpx;
		margin-top: 20rpx;
		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 50px;
			font-size: 28rpx;
		}
	}
</style>
